<template>
	<div class="activi">
		<div class="note" :style ="note"> 
			<div class="top_tab">
	      <span>活动详情</span>
	    </div>
			<div class="info">
				<div class="title">
					<span>{{list.title}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong_xq_yb@2x.png" alt="">
					<span>活动时间：</span><span class="col_1">{{(list.activity_time) | time}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong_dt_yb@2x.png" alt="">
					<span>活动地点：</span><span class="col_1">{{list.activity_address}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong_dt_jz@2x.png" alt="">
					<span>报名截止时间：&nbsp;{{(list.deadline) | time}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong__me@2x.png" alt="">
					<span v-if="list.quota!=0">活动名额：</span><span v-if="list.quota!=0" class="col_1">{{list.quota}}人</span>
					<span v-if="list.quota==0">活动名额：</span><span v-if="list.quota==0" class="col_1">不限</span>
				</div>
			</div>
		</div>
		<div class="boxt">
			<div class="ms">
				<div class="title">
					<span>活动描述</span> 
				</div>
				<p>
					{{list.describe}}
				</p>
			</div>
			<div class="md">
				<div class="title">
					<div class="lf">
						<span>已报名人员</span>
					</div>
					<div class="rf" v-if="party_list.length!=0" @click="setActive(index)">
						<span>{{state}}</span>
						<img src="@as/img/hongdong_dt_xia@2x.png" alt="" :class="index == 0?'ImgAscive':'ImgUnAscive'">
					</div>
				</div>
				<div class="name" v-if="index==0">
					<span class="w">
						<span v-for="(item,index) in list.party_list" :key="index">
							{{item}}、
						</span>
					</span>
				</div>
				<div class="names" v-if="index==1">
					<span class="w">
						<span v-for="(item,index) in list.party_list" :key="index">
							{{item}}、
						</span>
					</span>
				</div>
				<div class="nomor" v-if="party_list.length==0">
					<span>暂无报名人员</span>
				</div>
			</div>
			<!-- status  1活动结束 2已报名 3报名中 -->
			<div class="btn"  v-if="list.status==3" @click="joinActivity()"> 
				<div class="qr">
					<span>确认报名</span>
				</div>
			</div>
			<div class="btn"  v-if="list.status==2" >
				<div class="yb">
					<span>已报名</span>
				</div>
			</div>
			<div class="btn"  v-if="list.status==1"> 
				<div class="js">
					<span>已结束</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list:{},
				state:'展开',
				index:0,
				eid:'',
				party_list:[],
				note: {
					backgroundImage: "url(" + require("@as/img/huodong_wode_xq@2x.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 244.5px",
				},
			}
		},
		mounted() {
			this.getDetails()
		},
		methods: {
			setActive: function(index) {
				if(this.index==0){
					this.index = 1
					this.state ='收起'
				}else{
					this.index = 0
					this.state ='展开'
				}
			},
			// 活动详情
			async getDetails () {  
				let that = this;
				try {
					let params = {
						uid: JSON.parse(Cookies.get('user_71ydj')).id,
						id:that.eid
					}
					const url = `/app/Organization/activity_info`
					let res = await that.$http.get(url, params)
					that.$progress.done()
					if (res.code === 200) {
						that.list = res.data;
						that.party_list = res.data.party_list
					}
				} catch (e) {
					console.log('​catch -> e', e)
				}
			},
			//参加活动 
			async joinActivity () {  
				let that = this;
				try {
					let params = {
						uid: JSON.parse(Cookies.get('user_71ydj')).id,
						activity_id:that.eid
					}
					const url = `/app/Organization/join_activity`
					let res = await that.$http.post(url, params)
					that.$progress.done()
					if (res.code === 200) {
						this.$toast.success(res.msg);
						this.$router.go(-1);
					}else {
						this.$toast.error(res.msg);
					}	
				} catch (e) {
					console.log('​catch -> e', e)
				}
			},
		},
		created(){
			this.eid = this.$route.query.id;//活动id
		}
	}
</script>

<style scoped lang="scss">
	.activi{
		background: #f47548;
	}
  .note{
		width:100%;
		height:244.5px;
		.top_tab {
			width:100%;
			height:50px;
			padding:0 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				color: #fff;
				font-size: 18px;
				font-weight: bold;
			}
		}
		.info{
			width:100%;
			padding: 10px 15px 15px 15px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.title{
				width:100%;
				display: flex;
				justify-content: center;
				span{
					color: #FFF;
					font-size: 15px;
				}
			}
			.xm{
				width:100%;
				padding: 0 0 0 15px;
				display: flex;
				align-items: center;
				margin-top: 12px;
				img{
					width:11.5px;
					height:11.5px;
				}
				span{
					color: #FFF;
					font-size: 13px;
					margin-left: 5px;
				}
				.col_1{
					margin-left: 32px;
				}
			}
		}
	}
	.boxt{
		width:100%;
		min-height:447.5px;
		background: #FFF;
		padding: 15px 0 15px 15px;
		position: relative;
		margin-top:-26px;
		left:0;
		border-top-left-radius:25px;
		border-top-right-radius:25px;
		display: flex;
		z-index: 99;
		flex-direction: column;
		.ms{
			width:100%;
			display: flex;
			flex-direction: column;
			.title{
				width:100%;
				padding: 0 0 8px 0;
				border-bottom: 1px solid #ccc;
				span{
					color:#333;
					font-size: 17px;
					font-weight: bold;
				}
			}
			p{
				font-size: 14px;
				color: #666;
				text-indent: 2em;
				margin-bottom: 48px;
				margin-top: 10px;
			}
		}
		.md{
			width:100%;
			display: flex;
			flex-direction: column;
			// padding-bottom:170px;
			.title{
				width:100%;
				padding: 0 15px 8px 0;
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.lf{
					span{
						color:#333;
						font-size: 17px;
						font-weight: bold;
					}
				}
				.rf{
					display: flex;
					align-items: center;
					margin-top: 10px;
					span{
						color: #999;
						font-size: 12px;
					}
					img{
						width:10px;
						height:8.5px;
						margin-left: 3px;
					}
				}
			}
			.name{
				width:100%;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				.w{
					margin-top: 10px;
				}
				span{
					font-size: 12px;
					color: #666;
					line-height: 2;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
			.names{
				width:100%;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				.w{
					margin-top: 10px;
				}
				span{
					font-size: 12px;
					color: #666;
					line-height: 2;
				}
			}
			.nomor{
				width:100%;
				box-sizing: border-box;
				span{
					display: inline-block;
					font-size: 14px;
					color:#666;
					text-indent: 2em;
				}
			}
		}
		.btn{
			width:100%;
			padding: 0 15px 0 0;
			box-sizing: border-box;
			position: absolute;
			left:8px;
			bottom: 10px;
			.qr{
				width:100%;
				height:45px;
				background: #f47548;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-size: 16px;
					color: #FFF;
				}
			}
			.yb{
				width:100%;
				height:45px;
				background: #eb4d44;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-size: 16px;
					color: #FFF;
				}
			}
			.js{
				width:100%;
				height:45px;
				background: #d5d5d5;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				span{
					font-size: 16px;
					color: #FFF;
				}
			}
		}
	}
		/* 180°旋转图片。 */
	.ImgAscive{
		transform: rotate(180deg); 
		transition: All 0.4s ease; 
		-webkit-transition: All 0.4s ease;
	}

	.ImgUnAscive{
		transform: rotate(360deg); 
		transition: All 0.4s ease; 
		-webkit-transition: All 0.4s ease; 
	}
	
</style>